<template>
	<view class="tabbar">
		<view @click="handleSetCurTab(item)" :class="`item ${curTab === item.type ? 'item__active' : ''}`" v-for="(item,index) in list" :key="index">
			<view :class="`iconfont ${item.icon}`"></view>
			<view class="name">{{item.name}}</view>
			<view class="active"></view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions} from 'vuex'; 
	export default {
		data() {
			return {
				list: [
					{ name: '统计', icon: 'icon-24gf-folderOpen', type: 'statistics', path: '/pages/statistics/index' },
					{ name: '工作台', icon: 'icon-gongzuotai', type: 'work', path: '/pages/work/center/index' },
					{ name: '地图', icon: 'icon-ditu', type: 'map', path: '/pages/map/index' },
					{ name: '待办', icon: 'icon-daiban', type: 'todo', path: '/pages/todo/index' },
					{ name: '我的', icon: 'icon-wode', type: 'account', path: '/pages/account/index' },
				],
			}
		},
		computed: {
			...mapGetters({ curTab: 'system/getCurTab', curRole: 'system/getCurRole' }),
		},
		methods: {
			...mapActions({ setCurTab: 'system/setCurTab', }),
			handleSetCurTab(item) {
				if (item.type === 'map') {
					uni.navigateTo({
						url: item.path
					})
				} else {
					this.setCurTab(item.type);
					uni.redirectTo({
						url: item.path
					})
				}
				// if (type === 'map') {
				// 	uni.navigateTo({
				// 		url: '/pages/map/index'
				// 	})
				// } else if (type === 'statistics') {
				// 	uni.redirectTo({
				// 		url: '/pages/statistics/index'	
				// 	})
				// 	this.setCurTab('statistics');
				// } else {
				// 	this.setCurTab(type);
				// }
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 140rpx;
		background-color: #fff;
		box-shadow: 0 0 29rpx 0px rgba(#bcbcb5, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding-left: 12rpx;
		padding-right: 12rpx;
		z-index: 999;
		.item{
			width: 120rpx;
			height: 120rpx;
			display: flex;
			text-align: center;
			align-content: space-between;
			flex-wrap: wrap;
			justify-content: space-around;
			box-sizing: border-box;
			padding-top: 18rpx;
			padding-bottom: 18rpx;
			position: relative;
			.iconfont{
				font-size: 45rpx;
				color: #3b3c40;
				// transition: 0.3s ease;
				position: relative;
				z-index: 5;
			}
			.name{
				width: 100%;
				display: block;
				font-size: 26rpx;
				color: #3b3c40;
				// transition: 0.3s ease;
				position: relative;
				z-index: 5;
			}
			.active{
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #2e5efe;
				border-radius: 30rpx;
				opacity: 0;
				// transition: 0.3s ease;
				transform: scale(0.3);
			}
		}
		.item__active{
			.active{
				opacity: 1;
				transform: scale(1);
			}
			.iconfont{
				color: #fff;
			}
			.name{
				color: #fff;
			}
		}
	}
</style>
